<!---
    Description: socket 通信
    Created by TWJ on 2019/10/14 0014 0025 上午 9:40 .
--->
<div class="layui-fluid layui-anim febs-anim" id="dfs-socket-info" lay-title="通信1">
    <div class="layui-row layui-col-space8 febs-container">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">socket1通信</div>
                <div class="layui-card-body">
                    <!--<form class="layui-form" action="" lay-filter="febs-form-elements">-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">接收信息：</label>
                        <div class="layui-input-block">
                            <textarea style="height: 300px" name="receive-msg-1" placeholder="" id="receive-msg1" readonly
                                      class="layui-textarea"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">发送信息：</label>
                        <div class="layui-input-block">
                            <textarea name="other" placeholder="" class="layui-textarea" id="send-msg1"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-filter="febs-form-elements" id="send1">发送</button>
                            <button type="reset" class="layui-btn layui-btn-primary" id="reset1">重置</button>
                        </div>
                    </div>
                    <!--</form>-->
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">socket2通信</div>
                <div class="layui-card-body">
                    <!--<form class="layui-form" action="" lay-filter="febs-form-elements">-->
                    <div class="layui-form-item">
                        <label class="layui-form-label">接收信息：</label>
                        <div class="layui-input-block">
                            <textarea style="height: 300px" name="receive-msg-1" placeholder="" readonly
                                      class="layui-textarea" id="receive-msg2"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">发送信息：</label>
                        <div class="layui-input-block">
                            <textarea contenteditable="true" name="other" placeholder=""
                                      class="layui-textarea" id="send-msg2"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-filter="febs-form-elements" id="send2">发送</button>
                            <button type="reset" class="layui-btn layui-btn-primary" id="reset2">重置</button>
                        </div>
                    </div>
                    <!--</form>-->
                </div>
            </div>
        </div>
    </div>
</div>


<script data-th-inline="none" type="text/javascript">

    layui.use(['jquery', 'febs'], function () {


        var socket1, socket2,
            $ = layui.jquery,
            febs = layui.febs,
            $view = $('#dfs-socket-info'),
            $send1 = $view.find('#send1'),
            $send2 = $view.find('#send2'),
            $reset1 = $view.find('#reset1'),
            $reset2 = $view.find('#reset2'),

            $sendMsg1 = $view.find('#send-msg1'),
            $sendMsg2 = $view.find('#send-msg2'),
            $receive1 = $view.find('#receive-msg1'),
            $receive2 = $view.find('#receive-msg2')
        ;
        $reset1.on('click', function () {
            $sendMsg1.val("");
        });
        $reset2.on('click', function () {
            $sendMsg2.val("");
        });

        $send1.on('click', function () {
            var message = $sendMsg1.val();
//            $receive1.append(message+"\r\n");
            $sendMsg1.val("");

            socket1.send(message);
        });

        $send2.on('click', function () {

            var message = $sendMsg2.val();
//            $receive2.append(message+"\r\n");
            $sendMsg2.val("");

            socket2.send(message);
        });

        if (typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            console.log("您的浏览器支持WebSocket");
            initSocket1();
            initSocket2();
        }

        function initSocket1() {
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            //等同于socket = new WebSocket("ws://localhost:8083/checkcentersys/websocket/20");
            socket1 = new WebSocket("ws://localhost:8080/socket-open/1");
            //打开事件
            socket1.onopen = function () {
                console.log("Socket 已打开");
//                socket1.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket1.onmessage = function (msg) {
                console.log(msg.data);
                $receive1.append(msg.data+"\r\n");
                //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            socket1.onclose = function () {
                console.log("Socket已关闭");
            };
            //发生了错误事件
            socket1.onerror = function () {
                alert("Socket发生了错误");
                //此时可以尝试刷新页面
            }
            //离开页面时，关闭socket
            //jquery1.8中已经被废弃，3.0中已经移除
            // $(window).unload(function(){
            //     socket.close();
            //});
        }

        function initSocket2() {
            socket2 = new WebSocket("ws://localhost:8080/socket-open/2");
            //打开事件
            socket2.onopen = function () {
                console.log("Socket 已打开");
//                socket2.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket2.onmessage = function (msg) {
                console.log(msg.data);
                $receive2.append(msg.data+"\r\n");
                //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            socket2.onclose = function () {
                console.log("Socket已关闭");
            };
            //发生了错误事件
            socket2.onerror = function () {
                alert("Socket发生了错误");
            }
        }
    })


</script>
</html>